<template>
  <view class="goods-details-page">
    <!-- 导航栏 -->
    <nut-navbar
      title="商品详情"
      back-text=""
      :fixed="true"
      @on-click-back="goBack"
    />
    
    <!-- 加载中状态 -->
    <template v-if="loading">
      <view class="skeleton-container">
        <view class="skeleton-image"></view>
        <view class="skeleton-content">
          <view class="skeleton-title"></view>
          <view class="skeleton-price"></view>
          <view class="skeleton-text"></view>
          <view class="skeleton-text"></view>
        </view>
      </view>
    </template>
    
    <!-- 商品不存在 -->
    <template v-else-if="!goods">
      <view class="empty-state">
        <text>商品不存在或已下架</text>
      </view>
    </template>
    
    <!-- 商品内容 -->
    <template v-else>
      <scroll-view scroll-y class="content-scroll">
        <!-- 商品主图区域 -->
        <view class="swiper-section">
          <image
            mode="aspectFill"
            :src="goods.cover"
            class="main-image"
          />
        </view>

        <!-- 商品信息区域 -->
        <view class="info-section">
          <view class="price-row">
            <nut-price :price="goods.price" size="large" />
            <text class="original-price">¥{{ goods.originalPrice }}</text>
            <text class="sales">已售{{ goods.sales }}+</text>
          </view>
          <text class="title">{{ goods.title }}</text>
          <view class="tags">
            <nut-tag type="primary">七天无理由</nut-tag>
            <nut-tag type="success">急速发货</nut-tag>
          </view>
        </view>

        <!-- 商品规格选择 -->
        <view 
          v-for="spec in goods.specs" 
          :key="spec.id" 
          class="spec-section"
        >
          <text class="section-title">选择{{ spec.name }}</text>
          <view class="spec-items">
            <view 
              v-for="value in spec.values" 
              :key="value.id"
              :class="['spec-item', { active: goods.selectedSpecs && goods.selectedSpecs[spec.id] === value.name }]"
              @tap="selectSpec(spec.id, value.id, value.name)"
            >
              {{ value.name }}
            </view>
          </view>
        </view>
        
        <!-- 安全区域预留 -->
        <view class="safe-area"></view>
      </scroll-view>

      <!-- 底部操作栏 -->
      <view class="footer-bar">
        <view class="button-group">
          <view class="icon-button" @tap="goToCart">
            <nut-icon name="cart" size="20"></nut-icon>
            <text>购物车</text>
          </view>
          <view class="action-button add-cart" @tap="addToCart">加入购物车</view>
          <view class="action-button buy-now" @tap="buyNow">立即购买</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

// 定义商品详情类型
interface GoodsDetail {
  id: number | string;
  title: string;
  price: number;
  originalPrice: number;
  cover: string;
  images?: string[];
  description?: string;
  sales?: number;
  stock?: number;
  specs?: {
    id: number | string;
    name: string;
    values: { id: number | string; name: string }[];
  }[];
  selectedSpecs?: { [key: string]: string };
}

// 状态
const loading = ref(true)
const goods = ref<GoodsDetail | null>(null)

// 获取路由参数
const router = Taro.getCurrentInstance().router
const id = router?.params?.id || ''

// 加载商品详情
const loadGoodsDetail = async () => {
  if (!id) {
    Taro.showToast({
      title: '商品ID不存在',
      icon: 'none'
    })
    Taro.navigateBack()
    return
  }

  try {
    loading.value = true
    // 实际项目中应改成API调用
    // const res = await api.goods.getGoodsDetail(id)
    // goods.value = res
    
    // 模拟数据
    setTimeout(() => {
      goods.value = {
        id,
        title: '2024新款男士休闲商务衬衫',
        price: 299,
        originalPrice: 599,
        cover: 'https://via.placeholder.com/750x750',
        sales: 1000,
        stock: 500,
        specs: [
          {
            id: 1,
            name: '尺码',
            values: [
              { id: 1, name: 'M' },
              { id: 2, name: 'L' },
              { id: 3, name: 'XL' }
            ]
          },
          {
            id: 2,
            name: '颜色',
            values: [
              { id: 1, name: '白色' },
              { id: 2, name: '黑色' },
              { id: 3, name: '蓝色' }
            ]
          }
        ],
        selectedSpecs: { '1': 'M', '2': '白色' }
      }
      loading.value = false
    }, 500)
  } catch (error) {
    console.error('获取商品详情失败', error)
    Taro.showToast({
      title: '获取商品详情失败',
      icon: 'none'
    })
    loading.value = false
  }
}

// 选择规格
const selectSpec = (specId: string | number, valueId: string | number, valueName: string) => {
  if (!goods.value) return
  
  goods.value = {
    ...goods.value,
    selectedSpecs: {
      ...goods.value.selectedSpecs,
      [specId]: valueName
    }
  }
}

// 返回上一页
const goBack = () => {
  Taro.navigateBack()
}

// 前往购物车
const goToCart = () => {
  Taro.switchTab({ url: '/pages/cart/index' })
}

// 添加到购物车
const addToCart = () => {
  if (!goods.value) return
  
  Taro.showToast({
    title: '已添加到购物车',
    icon: 'success'
  })
  
  // 实际项目中应调用API
  // api.cart.addToCart({
  //   goodsId: goods.value.id,
  //   quantity: 1,
  //   specs: goods.value.selectedSpecs
  // })
}

// 立即购买
const buyNow = () => {
  if (!goods.value) return
  
  Taro.navigateTo({
    url: `/pages/order/confirm?goodsId=${goods.value.id}&quantity=1`
  })
}

// 页面加载时获取商品详情
onMounted(() => {
  loadGoodsDetail()
})
</script>

<style lang="scss">
.goods-details-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .skeleton-container {
    padding: 15px;
    
    .skeleton-image {
      width: 100%;
      height: 300px;
      background-color: #eee;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .skeleton-content {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      
      .skeleton-title {
        height: 20px;
        background-color: #eee;
        margin-bottom: 15px;
        width: 80%;
        border-radius: 4px;
      }
      
      .skeleton-price {
        height: 24px;
        background-color: #eee;
        margin-bottom: 15px;
        width: 40%;
        border-radius: 4px;
      }
      
      .skeleton-text {
        height: 16px;
        background-color: #eee;
        margin-bottom: 10px;
        width: 100%;
        border-radius: 4px;
      }
    }
  }
  
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #999;
  }
  
  .content-scroll {
    height: calc(100vh - 50px - 60px);
  }
  
  .swiper-section {
    width: 100%;
    height: 300px;
    
    .main-image {
      width: 100%;
      height: 100%;
    }
  }
  
  .info-section {
    padding: 15px;
    background-color: #fff;
    margin-bottom: 10px;
    
    .price-row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      .original-price {
        margin-left: 10px;
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
      }
      
      .sales {
        font-size: 12px;
        color: #999;
        margin-left: auto;
      }
    }
    
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    .tags {
      display: flex;
      flex-wrap: wrap;
      
      .nut-tag {
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }
  
  .spec-section {
    padding: 15px;
    background-color: #fff;
    margin-bottom: 10px;
    
    .section-title {
      font-size: 14px;
      margin-bottom: 15px;
      display: block;
    }
    
    .spec-items {
      display: flex;
      flex-wrap: wrap;
      
      .spec-item {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 13px;
        
        &.active {
          background-color: #fef8e7;
          border-color: #fa2c19;
          color: #fa2c19;
        }
      }
    }
  }
  
  .safe-area {
    height: 30px;
    
    &::after {
      content: '';
      display: block;
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
    }
  }
  
  .footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    
    .button-group {
      display: flex;
      height: 100%;
      
      .icon-button {
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
      
      .action-button {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        
        &.add-cart {
          background-color: #ff9500;
        }
        
        &.buy-now {
          background-color: #fa2c19;
        }
      }
    }
  }
}
</style>